<form id="batch-allocate-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    <input type="hidden" name="plan_id" value="{$row.id}">
    
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">生产计划信息</h3>
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-md-6">
                    <p><strong>计划编码：</strong>{$row.plan_code}</p>
                    <p><strong>计划名称：</strong>{$row.plan_name}</p>
                    <p><strong>产品名称：</strong>{$row.product_name}</p>
                </div>
                <div class="col-md-6">
                    <p><strong>产品型号：</strong>{$row.product_model}</p>
                    <p><strong>计划数量：</strong>{$row.total_quantity}</p>
                    <p><strong>剩余数量：</strong><span id="remaining-quantity">{$row.total_quantity}</span></p>
                </div>
            </div>
        </div>
    </div>
    
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">批量分配工序</h3>
        </div>
        <div class="panel-body">
            <div id="allocation-list">
                <div class="allocation-item row" data-index="0">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="control-label">工序</label>
                            <select name="allocations[0][process_id]" class="form-control" data-rule="required">
                                <option value="">请选择工序</option>
                                {foreach $processList as $id => $name}
                                <option value="{$id}">{$name}</option>
                                {/foreach}
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="control-label">工人</label>
                            <select name="allocations[0][user_id]" class="form-control" data-rule="required">
                                <option value="">请选择工人</option>
                                {foreach $userList as $id => $name}
                                <option value="{$id}">{$name}</option>
                                {/foreach}
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="control-label">分配数量</label>
                            <input type="number" name="allocations[0][quantity]" class="form-control quantity-input" data-rule="required;number" min="1" max="{$row.total_quantity}">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="control-label">操作</label>
                            <button type="button" class="btn btn-danger btn-sm remove-allocation" style="display: none;">删除</button>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="row">
                <div class="col-md-12">
                    <button type="button" class="btn btn-success" id="add-allocation">添加分配</button>
                    <button type="submit" class="btn btn-primary">保存分配</button>
                </div>
            </div>
        </div>
    </div>
</form>

<script>
$(document).ready(function() {
    var maxQuantity = {$row.total_quantity};
    var allocationIndex = 1;
    
    // 添加分配行
    $('#add-allocation').click(function() {
        var template = `
            <div class="allocation-item row" data-index="${allocationIndex}">
                <div class="col-md-3">
                    <div class="form-group">
                        <label class="control-label">工序</label>
                        <select name="allocations[${allocationIndex}][process_id]" class="form-control" data-rule="required">
                            <option value="">请选择工序</option>
                            {foreach $processList as $id => $name}
                            <option value="{$id}">{$name}</option>
                            {/foreach}
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label class="control-label">工人</label>
                        <select name="allocations[${allocationIndex}][user_id]" class="form-control" data-rule="required">
                            <option value="">请选择工人</option>
                            {foreach $userList as $id => $name}
                            <option value="{$id}">{$name}</option>
                            {/foreach}
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label class="control-label">分配数量</label>
                        <input type="number" name="allocations[${allocationIndex}][quantity]" class="form-control quantity-input" data-rule="required;number" min="1">
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label class="control-label">操作</label>
                        <button type="button" class="btn btn-danger btn-sm remove-allocation">删除</button>
                    </div>
                </div>
            </div>
        `;
        
        $('#allocation-list').append(template);
        allocationIndex++;
        updateRemoveButtons();
    });
    
    // 删除分配行
    $(document).on('click', '.remove-allocation', function() {
        $(this).closest('.allocation-item').remove();
        updateRemoveButtons();
        updateRemainingQuantity();
    });
    
    // 更新删除按钮显示
    function updateRemoveButtons() {
        var items = $('.allocation-item');
        items.find('.remove-allocation').hide();
        if (items.length > 1) {
            items.find('.remove-allocation').show();
        }
    }
    
    // 更新剩余数量
    function updateRemainingQuantity() {
        var totalAllocated = 0;
        $('.quantity-input').each(function() {
            var quantity = parseInt($(this).val()) || 0;
            totalAllocated += quantity;
        });
        var remaining = maxQuantity - totalAllocated;
        $('#remaining-quantity').text(remaining);
        
        // 更新最大数量限制
        $('.quantity-input').attr('max', remaining);
    }
    
    // 监听数量输入变化
    $(document).on('input', '.quantity-input', function() {
        updateRemainingQuantity();
    });
    
    // 表单提交验证
    $('#batch-allocate-form').on('submit', function(e) {
        var totalAllocated = 0;
        $('.quantity-input').each(function() {
            var quantity = parseInt($(this).val()) || 0;
            totalAllocated += quantity;
        });
        
        if (totalAllocated > maxQuantity) {
            e.preventDefault();
            alert('分配数量不能超过计划数量！');
            return false;
        }
        
        if (totalAllocated === 0) {
            e.preventDefault();
            alert('请至少分配一个任务！');
            return false;
        }
    });
});
</script>
